<!doctype html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <link rel="icon" href="static/images/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
    <link rel="icon" href="static/images/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
    <link rel="stylesheet" href="lib/bootstrap-icons/font/bootstrap-icons.css">
    <link rel="stylesheet" href="static/css/bootstrap.min.css">
    <link rel="stylesheet" href="static/css/bootstrap-admin.min.css">
    <!--  代码高亮  -->
    <link rel="stylesheet" href="lib/prismjs/themes/prism-okaidia.css">
    <title>bootstrap-admin</title>
</head>
<body>


<!--侧边栏-->
<div class="bsa-sidebar">
    <div class="bsa-sidebar-header">
        <img src="static/images/logo-icon.png" class="bsa-logo-icon" alt="logo-icon">
        <div class="bsa-logo-text">bootstrap-admin</div>
    </div>
    <div class="bsa-sidebar-body">
        <ul class="bsa-menu">
            <li>
                <a href="index.html">
                    <i class="bi bi-house"></i>首页
                </a>
            </li>
            <li>
                <a href="javascript:" class="has-children open">
                    <i class="bi bi-columns-gap"></i>UI组件
                </a>
                <ul>
                    <li>
                        <a href="component-card.html">卡片</a>
                    </li>
                    <li>
                        <a href="component-button.html">按钮</a>
                    </li>
                    <li>
                        <a href="component-accordion.html">手风琴</a>
                    </li>
                    <li>
                        <a href="component-alert.html">警告框</a>
                    </li>
                    <li>
                        <a href="component-badge.html">徽章</a>
                    </li>
                    <li>
                        <a href="component-breadcrumb.html">面包屑</a>
                    </li>
                    <li>
                        <a href="component-table.html">表格</a>
                    </li>
                    <li>
                        <a href="javascript:" class="has-children open">表单</a>
                        <ul>
                            <li><a href="component-form-elements.html" class="active">基础元素</a></li>
                            <li><a href="component-form-validations.html">表单验证</a></li>
                            <li><a href="component-form-layouts.html">表单布局</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <a href="javascript:" class="has-children">
                    <i class="bi bi-filetype-html"></i>页面
                </a>
                <ul>
                    <li>
                        <a href="page-profile.html">个人资料</a>
                    </li>
                    <li>
                        <a href="page-timeline.html">时间轴</a>
                    </li>
                    <li>
                        <a href="page-error.html">错误页面</a>
                    </li>
                    <li>
                        <a href="page-add.html">新增页面</a>
                    </li>
                    <li>
                        <a href="page-list.html">列表页</a>
                    </li>
                    <li>
                        <a href="page-blank.html">新页面</a>
                    </li>
                    <li>
                        <a href="page-login.html">登录页</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="javascript:" class="has-children">
                    <i class="bi bi-filetype-js"></i>插件
                </a>
                <ul>
                    <li><a href="plugin-bootstrap-notify.html">通知插件</a></li>
                    <li><a href="plugin-bootstrap-dialog.html">弹层插件</a></li>
                    <li><a href="plugin-formvalidation.html">表单验证</a></li>
                    <li><a href="plugin-tempus-dominus.html">日期时间选择</a></li>
                    <li><a href="plugin-tinymce.html">富文本编辑器</a></li>
                    <li><a href="plugin-dropzone.html">文件上传</a></li>
                    <li><a href="plugin-croppie.html">头像裁剪</a></li>
                    <li><a href="plugin-ztree.html">树形组件</a></li>
                </ul>
            </li>
            <li>
                <a href="javascript:" class="has-children">
                    <i class="bi bi-list-nested"></i>多级菜单
                </a>
                <ul>
                    <li><a href="javascript:">一级菜单</a></li>
                    <li>
                        <a href="javascript:" class="has-children">一级菜单</a>
                        <ul>
                            <li><a href="javascript:">二级菜单</a></li>
                            <li>
                                <a href="javascript:" class="has-children">二级菜单</a>
                                <ul>
                                    <li><a href="javascript:">三级菜单</a></li>
                                    <li>
                                        <a href="javascript:" class="has-children">三级菜单</a>
                                        <ul>
                                            <li><a href="javascript:">四级菜单</a></li>
                                            <li><a href="javascript:">四级菜单</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="javascript:" class="has-children">一级菜单</a>
                        <ul>
                            <li><a href="javascript:">二级菜单</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>
<!--头部导航-->
<div class="bsa-header">
    <div class="bsa-header-item bsa-mobile-sidebar-item">
        <i class="bi bi-list"></i>
    </div>
    <div class="bsa-header-item bsa-search-bar-item">
        <form class="bsa-search-box" action="#">
            <input type="text" class="form-control bsa-search-input" name="keyword" aria-label="搜索关键词"
                   placeholder="搜索关键词">
            <button class="bsa-search-btn" type="submit"><i class="bi bi-search"></i></button>
            <i class="bi bi-x bsa-search-close-icon"></i>
        </form>
    </div>
    <div class="bsa-header-item bsa-mobile-search-item">
        <i class="bi bi-search"></i>
    </div>
    <div class="bsa-header-item dropdown">
        <i class="bi bi-grid" data-bs-toggle="dropdown" role="button"></i>
        <div class="dropdown-menu dropdown-menu-end bsa-dropdown-menu">
            <div class="bsa-dropdown-menu-body">
                <div class="container-fluid">
                    <div class="row row-cols-3 g-3 p-3">
                        <a class="col text-center text-decoration-none" href="javascript:">
                            <div class="bsa-app-thumb mx-auto bg-primary text-white"><i class="bi bi-bank"></i></div>
                            <div class="fs-6 mt-1 text-muted">银行</div>
                        </a>
                        <a class="col text-center text-decoration-none" href="javascript:">
                            <div class="bsa-app-thumb mx-auto bg-info text-white"><i class="bi bi-link"></i></div>
                            <div class="fs-6 mt-1 text-muted">拓展应用2</div>
                        </a>
                        <a class="col text-center text-decoration-none" href="javascript:">
                            <div class="bsa-app-thumb mx-auto bg-danger text-white"><i class="bi bi-link"></i></div>
                            <div class="fs-6 mt-1 text-muted">拓展应用3</div>
                        </a>
                        <a class="col text-center text-decoration-none" href="javascript:">
                            <div class="bsa-app-thumb mx-auto bg-danger text-white"><i class="bi bi-link"></i></div>
                            <div class="fs-6 mt-1 text-muted">拓展应用4</div>
                        </a>
                        <a class="col text-center text-decoration-none" href="javascript:">
                            <div class="bsa-app-thumb mx-auto bg-danger text-white"><i class="bi bi-link"></i></div>
                            <div class="fs-6 mt-1 text-muted">拓展应用5</div>
                        </a>
                        <a class="col text-center text-decoration-none" href="javascript:">
                            <div class="bsa-app-thumb mx-auto bg-danger text-white"><i class="bi bi-link"></i></div>
                            <div class="fs-6 mt-1 text-muted">拓展应用6</div>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="bsa-header-item dropdown">
        <div class="position-relative " data-bs-toggle="dropdown" role="button">
            <span class="bsa-num-count">99+</span>
            <i class="bi bi-bell"></i>
        </div>
        <div class="dropdown-menu dropdown-menu-end bsa-dropdown-menu">

            <div class="bsa-dropdown-menu-header d-flex align-items-center justify-content-between">
                <p class="bsa-dropdown-menu-title">通知列表</p>
                <a href="javascript:" class="bsa-dropdown-menu-all-read">全部设为已读</a>
            </div>

            <div class="bsa-dropdown-menu-body">
                <a class="dropdown-item" href="javascript:">
                    <div class="bsa-media">
                        <div class="bsa-media-thumb bg-danger text-white"><i class="bi bi-cart"></i></div>
                        <div class="bsa-media-body">
                            <h5 class="bsa-media-title">新订单</h5>
                            <p class="bsa-media-text">您收到新的订单</p>
                            <p class="bsa-media-time small">10秒前</p>
                        </div>
                    </div>
                </a>
                <a class="dropdown-item" href="javascript:">
                    <div class="bsa-media">
                        <div class="bsa-media-thumb bg-success text-white"><i class="bi bi-people"></i></div>
                        <div class="bsa-media-body">
                            <h5 class="bsa-media-title">新增用户</h5>
                            <p class="bsa-media-text">100个新用户注册</p>
                            <p class="bsa-media-time small">30分钟前</p>
                        </div>
                    </div>
                </a>
                <a class="dropdown-item" href="javascript:">
                    <div class="bsa-media">
                        <div class="bsa-media-thumb bg-warning text-white"><i class="bi bi-chat-square-dots"></i></div>
                        <div class="bsa-media-body">
                            <h5 class="bsa-media-title">新的评论</h5>
                            <p class="bsa-media-text">您收到客户新的评论</p>
                            <p class="bsa-media-time small">2天前</p>
                        </div>
                    </div>
                </a>
                <a class="dropdown-item" href="javascript:">
                    <div class="bsa-media">
                        <div class="bsa-media-thumb bg-primary text-white"><i class="bi bi-cart-check"></i></div>
                        <div class="bsa-media-body">
                            <h5 class="bsa-media-title">订单已经发货</h5>
                            <p class="bsa-media-text">您的商品已在运送途中</p>
                            <p class="bsa-media-time small">3天前</p>
                        </div>
                    </div>
                </a>
                <a class="dropdown-item" href="javascript:">
                    <div class="bsa-media">
                        <div class="bsa-media-thumb bg-secondary text-white"><i class="bi bi-person-workspace"></i>
                        </div>
                        <div class="bsa-media-body">
                            <h5 class="bsa-media-title">新的同事</h5>
                            <p class="bsa-media-text">新增3位后台管理工作成员</p>
                            <p class="bsa-media-time small">1周前</p>
                        </div>
                    </div>
                </a>
            </div>

            <div class="bsa-dropdown-menu-footer d-flex align-items-center justify-content-center">
                <a href="javascript:" class="bsa-dropdown-view-all">查看所有通知</a>
            </div>

        </div>
    </div>
    <div class="bsa-header-item dropdown">
        <div class="position-relative " data-bs-toggle="dropdown" role="button">
            <span class="bsa-num-count">9</span>
            <i class="bi bi-chat-left"></i>
        </div>
        <div class="dropdown-menu dropdown-menu-end bsa-dropdown-menu">
            <div class="bsa-dropdown-menu-header d-flex align-items-center justify-content-between">
                <p class="bsa-dropdown-menu-title">消息列表</p>
                <a href="javascript:" class="bsa-dropdown-menu-all-read">全部设为已读</a>
            </div>
            <div class="bsa-dropdown-menu-body">
                <a class="dropdown-item" href="javascript:">
                    <div class="bsa-media">
                        <div class="bsa-media-thumb">
                            <img src="static/images/tx/1-14122G11110-50.jpg" class="bsa-media-thumb-img" alt="avatar">
                        </div>
                        <div class="bsa-media-body">
                            <h5 class="bsa-media-title">青蛙王子</h5>
                            <p class="bsa-media-text">请给我开通新的角色权限~</p>
                            <p class="bsa-media-time small">16秒前</p>
                        </div>
                    </div>
                </a>
                <a class="dropdown-item" href="javascript:">
                    <div class="bsa-media">
                        <div class="bsa-media-thumb">
                            <img src="static/images/tx/1-14122G11131.jpg" class="bsa-media-thumb-img" alt="avatar">
                        </div>
                        <div class="bsa-media-body">
                            <h5 class="bsa-media-title">骑着蜗牛看世界</h5>
                            <p class="bsa-media-text">兄弟，晚上一起去喝几杯</p>
                            <p class="bsa-media-time small">40分钟前</p>
                        </div>
                    </div>
                </a>
                <a class="dropdown-item" href="javascript:">
                    <div class="bsa-media">
                        <div class="bsa-media-thumb">
                            <img src="static/images/tx/1-14122G11114.jpg" class="bsa-media-thumb-img" alt="avatar">
                        </div>
                        <div class="bsa-media-body">
                            <h5 class="bsa-media-title">小刘</h5>
                            <p class="bsa-media-text">订单已经发货完毕</p>
                            <p class="bsa-media-time small">7天前</p>
                        </div>
                    </div>
                </a>
                <a class="dropdown-item" href="javascript:">
                    <div class="bsa-media">
                        <div class="bsa-media-thumb">
                            <img src="static/images/tx/1-14122G11126-50.jpg" class="bsa-media-thumb-img" alt="avatar">
                        </div>
                        <div class="bsa-media-body">
                            <h5 class="bsa-media-title">小王</h5>
                            <p class="bsa-media-text">晚上一起去公园走走呀~</p>
                            <p class="bsa-media-time small">8天前</p>
                        </div>
                    </div>
                </a>
                <a class="dropdown-item" href="javascript:">
                    <div class="bsa-media">
                        <div class="bsa-media-thumb">
                            <img src="static/images/tx/1-14122G11112-50.jpg" class="bsa-media-thumb-img" alt="avatar">
                        </div>
                        <div class="bsa-media-body">
                            <h5 class="bsa-media-title">人生如茶</h5>
                            <p class="bsa-media-text">今天晚上大家留下来开个产品会议</p>
                            <p class="bsa-media-time small">2周前</p>
                        </div>
                    </div>
                </a>
            </div>
            <div class="bsa-dropdown-menu-footer d-flex align-items-center justify-content-center">
                <a href="javascript:" class="bsa-dropdown-view-all">查看所有消息</a>
            </div>
        </div>
    </div>
    <div class="bsa-header-item dropdown">
        <div class="bsa-user-info" data-bs-toggle="dropdown" role="button">
            <img src="static/images/avatar.jpg" class="bsa-user-img" alt="用户头像">
            <div class="bsa-user-detail">
                <div class="bsa-user-name">欲饮琵琶码上催</div>
                <div class="bsa-user-role">超级管理员</div>
            </div>
        </div>
        <ul class="dropdown-menu dropdown-menu-end">
            <li><a class="dropdown-item" href="javascript:"><i class="bi bi-person"></i>个人资料</a></li>
            <li><a class="dropdown-item" href="javascript:"><i class="bi bi-gear"></i>设置</a></li>
            <li>
                <div class="dropdown-divider"></div>
            </li>
            <li><a class="dropdown-item" href="javascript:"><i class="bi bi-box-arrow-right"></i>退出登录</a></li>
        </ul>
    </div>
</div>

<!--内容区域-->
<div class="bsa-main-wrapper">
    <div class="bsa-main-content">
        <div class="card border-0 shadow-sm">
            <div class="container-fluid">
                <div class="row row-cols-1 g-2">
                    <div class="col">
                        <div class="card-body">
                            <h5 class="card-title">文本输入框</h5>
                            <div class="dropdown-divider mb-3"></div>
                            <div class="bsa-component">
                                <input class="form-control mb-3" type="text" placeholder="Default input"
                                       aria-label="default input example">
                                <input class="form-control form-control-sm mb-3" type="text"
                                       placeholder=".form-control-sm"
                                       aria-label=".form-control-sm ">
                                <input class="form-control form-control-lg mb-3" type="text"
                                       placeholder=".form-control-lg"
                                       aria-label=".form-control-lg ">
                                <input class="form-control mb-3" type="text" placeholder="禁用输入框"
                                       aria-label="Disabled input example" disabled="">
                                <input class="form-control mb-3" type="text" placeholder="禁用只读的输入框"
                                       aria-label="Disabled input example" disabled="" readonly="">
                                <input class="form-control" type="text" placeholder="只读的输入框"
                                       aria-label="readonly input example" readonly="">
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="card-body">
                            <h5 class="card-title">选择框</h5>
                            <div class="dropdown-divider mb-3"></div>
                            <div class="bsa-component">
                                <select class="form-select mb-3" aria-label="Default select example">
                                    <option selected="">请选择你喜欢的水果</option>
                                    <option value="1">西瓜</option>
                                    <option value="2">榴莲</option>
                                    <option value="3">葡萄</option>
                                </select>
                                <select class="form-select form-select-lg mb-3" aria-label=".form-select-lg example">
                                    <option selected="">请选择你喜欢的水果</option>
                                    <option value="1">西瓜</option>
                                    <option value="2">榴莲</option>
                                    <option value="3">葡萄</option>
                                </select>
                                <select class="form-select form-select-sm mb-3" aria-label=".form-select-sm example">
                                    <option selected="">请选择你喜欢的水果</option>
                                    <option value="1">西瓜</option>
                                    <option value="2">榴莲</option>
                                    <option value="3">葡萄</option>
                                </select>
                                <select class="form-select" aria-label="Disabled select example" disabled="">
                                    <option selected="">请选择你喜欢的水果</option>
                                    <option value="1">西瓜</option>
                                    <option value="2">榴莲</option>
                                    <option value="3">葡萄</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="card-body">
                            <h5 class="card-title">文件选择输入框</h5>
                            <div class="dropdown-divider mb-3"></div>
                            <div class="bsa-component">
                                <div class="mb-3">
                                    <label for="formFile" class="form-label">默认文件选择输入框</label>
                                    <input class="form-control" type="file" id="formFile">
                                </div>
                                <div class="mb-3">
                                    <label for="formFileMultiple" class="form-label">多选文件选择输入框</label>
                                    <input class="form-control" type="file" id="formFileMultiple" multiple="">
                                </div>
                                <div class="mb-3">
                                    <label for="formFileDisabled" class="form-label">禁用的文件选择输入框</label>
                                    <input class="form-control" type="file" id="formFileDisabled" disabled="">
                                </div>
                                <div class="mb-3">
                                    <label for="formFileSm" class="form-label">小尺寸的文件选择输入框</label>
                                    <input class="form-control form-control-sm" id="formFileSm" type="file">
                                </div>
                                <div>
                                    <label for="formFileLg" class="form-label">大尺寸的文件选择输入框</label>
                                    <input class="form-control form-control-lg" id="formFileLg" type="file">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="card-body">
                            <h5 class="card-title">单选和多选</h5>
                            <div class="dropdown-divider mb-3"></div>

                            <div class="row row-cols-1 row-cols-sm-4 row-cols-md-4 row-cols-xl-4 g-3">
                                <div class="col">
                                    <div class="bsa-component">
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" value=""
                                                   id="flexCheckDefault">
                                            <label class="form-check-label" for="flexCheckDefault">Default
                                                checkbox</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" value=""
                                                   id="flexCheckChecked"
                                                   checked="">
                                            <label class="form-check-label" for="flexCheckChecked">Checked
                                                checkbox</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" value=""
                                                   id="flexCheckIndeterminate">
                                            <label class="form-check-label" for="flexCheckIndeterminate">Indeterminate
                                                checkbox</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" value=""
                                                   id="flexCheckDisabled"
                                                   disabled="">
                                            <label class="form-check-label" for="flexCheckDisabled">Disabled
                                                checkbox</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="checkbox" value=""
                                                   id="flexCheckCheckedDisabled"
                                                   checked="" disabled="">
                                            <label class="form-check-label" for="flexCheckCheckedDisabled">Disabled
                                                checked
                                                checkbox</label>
                                        </div>
                                    </div>
                                </div>

                                <div class="col">
                                    <div class="bsa-component">
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="flexRadioDefault"
                                                   id="flexRadioDefault1">
                                            <label class="form-check-label" for="flexRadioDefault1">Default
                                                radio</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="flexRadioDefault"
                                                   id="flexRadioDefault2" checked="">
                                            <label class="form-check-label" for="flexRadioDefault2">Default checked
                                                radio</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="flexRadioDisabled"
                                                   id="flexRadioDisabled" disabled="">
                                            <label class="form-check-label" for="flexRadioDisabled">Disabled
                                                radio</label>
                                        </div>
                                        <div class="form-check">
                                            <input class="form-check-input" type="radio" name="flexRadioDisabled"
                                                   id="flexRadioCheckedDisabled" checked="" disabled="">
                                            <label class="form-check-label" for="flexRadioCheckedDisabled">Disabled
                                                checked
                                                radio</label>
                                        </div>
                                    </div>
                                </div>
                                <div class="col">
                                    <div class="bsa-component">
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
                                            <label class="form-check-label" for="flexSwitchCheckDefault">Default switch
                                                checkbox
                                                input</label>
                                        </div>
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked"
                                                   checked="">
                                            <label class="form-check-label" for="flexSwitchCheckChecked">Checked switch
                                                checkbox
                                                input</label>
                                        </div>
                                        <div class="form-check-danger form-check form-switch">
                                            <input class="form-check-input" type="checkbox"
                                                   id="flexSwitchCheckCheckedDanger"
                                                   checked="">
                                            <label class="form-check-label" for="flexSwitchCheckCheckedDanger">Checked
                                                switch
                                                checkbox input</label>
                                        </div>
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox" id="flexSwitchCheckDisabled"
                                                   disabled="">
                                            <label class="form-check-label" for="flexSwitchCheckDisabled">Disabled
                                                switch checkbox
                                                input</label>
                                        </div>
                                        <div class="form-check form-switch">
                                            <input class="form-check-input" type="checkbox"
                                                   id="flexSwitchCheckCheckedDisabled"
                                                   checked="" disabled="">
                                            <label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled
                                                checked
                                                switch checkbox input</label>
                                        </div>
                                    </div>
                                </div>

                                <div class="col">
                                    <div class="bsa-component">
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="checkbox" id="inlineCheckbox1"
                                                   value="option1">
                                            <label class="form-check-label" for="inlineCheckbox1">1</label>
                                        </div>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="checkbox" id="inlineCheckbox2"
                                                   value="option2">
                                            <label class="form-check-label" for="inlineCheckbox2">2</label>
                                        </div>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="checkbox" id="inlineCheckbox3"
                                                   value="option3"
                                                   disabled="">
                                            <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
                                        </div>

                                    </div>
                                </div>
                                <div class="col">
                                    <div class="bsa-component">
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="inlineRadioOptions"
                                                   id="inlineRadio1"
                                                   value="option1">
                                            <label class="form-check-label" for="inlineRadio1">1</label>
                                        </div>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="inlineRadioOptions"
                                                   id="inlineRadio2"
                                                   value="option2">
                                            <label class="form-check-label" for="inlineRadio2">2</label>
                                        </div>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" name="inlineRadioOptions"
                                                   id="inlineRadio3"
                                                   value="option3" disabled="">
                                            <label class="form-check-label" for="inlineRadio3">3 (disabled)</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="card-body">
                            <h5 class="card-title">input框的多类型演示</h5>
                            <div class="dropdown-divider mb-3"></div>

                            <div class="bsa-component">

                                <form>
                                    <div class="mb-3">
                                        <label class="form-label">Date:</label>
                                        <input type="date" class="form-control">
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Date time:</label>
                                        <input type="datetime-local" class="form-control">
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Email:</label>
                                        <input type="email" class="form-control" placeholder="example@gmail.com">
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Password:</label>
                                        <input type="password" class="form-control" value="........">
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Input File:</label>
                                        <input type="file" class="form-control">
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Month:</label>
                                        <input type="month" class="form-control">
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Search:</label>
                                        <input type="search" class="form-control">
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Tel:</label>
                                        <input type="tel" class="form-control">
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Time:</label>
                                        <input type="time" class="form-control">
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Url:</label>
                                        <input type="url" class="form-control" placeholder="https://example.com/users/">
                                    </div>
                                    <div class="mb-3">
                                        <label class="form-label">Week:</label>
                                        <input type="week" class="form-control">
                                    </div>
                                    <div class="mb-3">
                                        <label for="exampleColorInput" class="form-label">Color picker</label>
                                        <input type="color" class="form-control form-control-color"
                                               id="exampleColorInput"
                                               value="#563d7c" title="Choose your color">
                                    </div>
                                </form>
                            </div>

                        </div>
                    </div>
                    <div class="col">
                        <div class="card-body">
                            <h5 class="card-title">范围选择输入框</h5>
                            <div class="dropdown-divider mb-3"></div>
                            <div class="bsa-component">
                                <div class="mb-3">
                                    <label for="customRange1" class="form-label">Example range</label>
                                    <input type="range" class="form-range" id="customRange1">
                                </div>
                                <div class="mb-3">
                                    <label for="disabledRange" class="form-label">Disabled range</label>
                                    <input type="range" class="form-range" id="disabledRange" disabled="">
                                </div>
                                <div class="mb-3">
                                    <label for="customRange2" class="form-label">Example range</label>
                                    <input type="range" class="form-range" min="0" max="5" id="customRange2">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col">
                        <div class="card-body">
                            <h5 class="card-title">HTML5的DATALISTS演示</h5>
                            <div class="dropdown-divider mb-3"></div>

                            <div class="bsa-component">
                                <label for="exampleDataList" class="form-label">Datalist example</label>
                                <input class="form-control" list="datalistOptions" id="exampleDataList"
                                       placeholder="Type to search...">
                                <datalist id="datalistOptions">
                                    <option value="San Francisco">
                                    </option>
                                    <option value="New York">
                                    </option>
                                    <option value="Seattle">
                                    </option>
                                    <option value="Los Angeles">
                                    </option>
                                    <option value="Chicago">
                                    </option>
                                </datalist>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!--调色板-->
<div class="bsa-switcher">

    <div class="bsa-switcher-toggler-btn">
        <div class="bsa-switcher-toggler-icon">
            <i class="bi bi-gear"></i>
        </div>
    </div>


    <div class="bsa-switcher-header">
        <h5 class="bsa-switcher-header-title">自定义主题</h5>
        <button type="button" class="btn-close text-reset bsa-switcher-toggler-btn"></button>
    </div>


    <div class="bsa-switcher-body">
        <h6 class="text-dark">头部颜色</h6>
        <hr>
        <div class="bsa-headercolor-wrap">

            <div class="row row-cols-auto g-3">
                <div class="col">
                    <div class="headercolor1"></div>
                </div>
                <div class="col">
                    <div class="headercolor2"></div>
                </div>
                <div class="col">
                    <div class="headercolor3"></div>
                </div>
                <div class="col">
                    <div class="headercolor4"></div>
                </div>
                <div class="col">
                    <div class="headercolor5"></div>
                </div>
                <div class="col">
                    <div class="headercolor6"></div>
                </div>
                <div class="col">
                    <div class="headercolor7"></div>
                </div>
                <div class="col">
                    <div class="headercolor8"></div>
                </div>
            </div>
        </div>

        <h6 class="text-dark">侧边栏颜色</h6>
        <hr>
        <div class="bsa-sidebarcolor-wrap">

            <div class="row row-cols-auto g-3">
                <div class="col">
                    <div class="sidebarcolor1"></div>
                </div>
                <div class="col">
                    <div class="sidebarcolor2"></div>
                </div>
                <div class="col">
                    <div class="sidebarcolor3"></div>
                </div>
                <div class="col">
                    <div class="sidebarcolor4"></div>
                </div>
                <div class="col">
                    <div class="sidebarcolor5"></div>
                </div>
                <div class="col">
                    <div class="sidebarcolor6"></div>
                </div>
                <div class="col">
                    <div class="sidebarcolor7"></div>
                </div>
                <div class="col">
                    <div class="sidebarcolor8"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="lib/prismjs/prism.js"></script>
<script src="static/js/bootstrap.bundle.min.js"></script>
<script src="src/bootstrap-admin.js"></script>


</body>
</html>